<template>
  <div>
    <div class="view-box">
      <div class="item">{{ docx }}</div>
      <VueOfficeDocx style="height: 100vh; overflow: auto" :src="docx" @rendered="rendered" />
    </div>
    <div class="view-box">
      <div class="item">{{ excel }}</div>
      <VueOfficeExcel style="height: 100vh; overflow: auto" :src="excel" @rendered="rendered" />
    </div>
    <div class="view-box">
      <div class="item">{{ pdf }}</div>
      <VueOfficePdf style="height: 100vh; overflow: auto" :src="pdf" @rendered="rendered" />
    </div>
  </div>
</template>

<script>

// 引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// 引入VueOffice组件 目前vue-office不支持doc格式
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'

export default {
  name: 'OfficeView',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
      pdf: ('http://static.shanhuxueyuan.com/test.pdf'),
      excel: ('http://static.shanhuxueyuan.com/demo/excel.xlsx'),
      docx: ('http://static.shanhuxueyuan.com/test6.docx'),
    }
  },
  methods: {
    rendered() {
      console.log('rendered')
    }
  }
}

</script>

<style lang="scss" scoped></style>
